/*global setInterval clearInterval*/
import React from 'react';
import {ScrollView} from 'react-native';
import {
    VictoryChart,
    VictoryBar,
    VictoryGroup,
    VictoryCandlestick,
    VictoryLine,
    VictoryScatter,
    VictoryArea,
    VictoryStack,
    VictoryTooltip,
} from 'victory-native';

const candleData = [
    {x: 1, open: 9, close: 30, high: 56, low: 7},
    {x: 2, open: 80, close: 40, high: 120, low: 10},
    {x: 3, open: 50, close: 80, high: 90, low: 20},
    {x: 4, open: 70, close: 22, high: 70, low: 5},
    {x: 5, open: 20, close: 35, high: 50, low: 10},
    {x: 6, open: 35, close: 30, high: 40, low: 3},
    {x: 7, open: 30, close: 90, high: 95, low: 30},
    {x: 8, open: 80, close: 81, high: 83, low: 75},
];

export default function ChartView() {
    return (
        <ScrollView>
            <VictoryChart>
                <VictoryLine />
            </VictoryChart>

            <VictoryChart>
                <VictoryCandlestick data={candleData} />
            </VictoryChart>

            <VictoryChart domain={{x: [0, 6]}}>
                <VictoryGroup
                    labels={['a', 'b', 'c']}
                    offset={10}
                    colorScale={'qualitative'}>
                    <VictoryLine
                        data={[
                            {x: 1, y: 1},
                            {x: 2, y: 2},
                            {x: 3, y: 5},
                            {x: 4, y: 4},
                            {x: 5, y: 2},
                            {x: 6, y: 5},
                        ]}
                    />
                    <VictoryLine
                        data={[
                            {x: 1, y: 2},
                            {x: 2, y: 4},
                            {x: 3, y: 7},
                            {x: 4, y: 4},
                            {x: 5, y: 2},
                            {x: 6, y: 5},
                        ]}
                    />
                    <VictoryLine
                        data={[
                            {x: 1, y: 3},
                            {x: 2, y: 4},
                            {x: 3, y: 9},
                            {x: 4, y: 4},
                            {x: 5, y: 2},
                            {x: 6, y: 5},
                        ]}
                    />
                </VictoryGroup>
            </VictoryChart>

            <VictoryChart>
                <VictoryScatter
                    labelComponent={<VictoryTooltip />}
                    style={{
                        data: {fill: ({datum}) => datum.fill},
                    }}
                    data={[
                        {
                            x: 1,
                            y: 3,
                            fill: 'red',
                            symbol: 'plus',
                            size: 6,
                            label: 'Red',
                        },
                        {
                            x: 2,
                            y: 5,
                            fill: 'magenta',
                            size: 9,
                            opacity: 0.4,
                            label: 'Magenta',
                        },
                        {
                            x: 3,
                            y: 4,
                            fill: 'orange',
                            size: 5,
                            label: 'Orange',
                        },
                        {
                            x: 4,
                            y: 2,
                            fill: 'brown',
                            symbol: 'square',
                            size: 6,
                            label: 'Brown',
                        },
                        {
                            x: 5,
                            y: 5,
                            fill: 'black',
                            symbol: 'triangleUp',
                            size: 5,
                            label: 'Black',
                        },
                    ]}
                />
            </VictoryChart>

            <VictoryChart>
                <VictoryStack>
                    <VictoryArea
                        data={[
                            {x: 'a', y: 2},
                            {x: 'b', y: 3},
                            {x: 'c', y: 5},
                            {x: 'd', y: 4},
                            {x: 'e', y: 7},
                        ]}
                    />
                    <VictoryArea
                        data={[
                            {x: 'a', y: 1},
                            {x: 'b', y: 4},
                            {x: 'c', y: 5},
                            {x: 'd', y: 7},
                            {x: 'e', y: 5},
                        ]}
                    />
                    <VictoryArea
                        data={[
                            {x: 'a', y: 3},
                            {x: 'b', y: 2},
                            {x: 'c', y: 6},
                            {x: 'd', y: 2},
                            {x: 'e', y: 6},
                        ]}
                    />
                    <VictoryArea
                        data={[
                            {x: 'a', y: 2},
                            {x: 'b', y: 3},
                            {x: 'c', y: 3},
                            {x: 'd', y: 4},
                            {x: 'e', y: 7},
                        ]}
                    />
                </VictoryStack>
            </VictoryChart>

            <VictoryChart polar style={{background: {fill: 'pink'}}}>
                <VictoryBar />
            </VictoryChart>
        </ScrollView>
    );
}

ChartView.navigationOptions = {
    headerTitle: 'VictoryChart',
};
